// 常用属性表

const option = {
  // 全图默认背景
  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号
  backgroundColor: 'rgba(0,0,0,0.1)', // 第四个参数是设置透明度

  // 标题 (可接受数组，进行多标题展示，数组成员为当前title对象类型)
  // ---------------------------------------------------------------------------------------------
  title: {
    text: '今日排放总量与昨日对比', //标题
    subtext: '2019-1-28', //副标题
    x: 'center', //左右距离
    y: '30%', //上下距离
    itemGap: 10, //副标题与标题之间的间距

    //文字设置
    // ======================================================================
    textStyle: {
      color: 'rgba(30,144,255,0.8)',
      fontFamily: '微软雅黑',
      fontSize: 12,
      fontWeight: 'bolder',
    },
  },

  // 图例
  // ---------------------------------------------------------------------------------------------
  legend: {
    orient: 'horizontal', // 布局方式，默认为水平布局，可选为： // 'horizontal' ¦ 'vertical'(图例列式排列)
    x: 'center', // 水平安放位置，默认为全图居中，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px）
    y: 'top', // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位px）
    backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
    borderColor: '#ccc', // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10， // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14, // 图例图形高度
    textStyle: {
      color: '#333', // 图例文字颜色
    },
  },

  // x轴
  // ---------------------------------------------------------------------------------------------
  xAxis: {
    show: true, //是否显示 x 轴
    position: 'bottom', //x轴的位置        (可选位置top  bottom)
    offset: 0, //x轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category', //坐标轴类型        (可选value   category   time   log)
    name: 'x轴', //坐标轴名称
    nameLocation: 'end', //坐标轴名称显示位置      (可选start   center   end)

    //坐标轴名称的文字样式
    // ======================================================================
    nameTextStyle: {
      color: 'black', //坐标轴名称的颜色
      fontSize: 30, //坐标轴名称的大小         (用数字表示)
      fontWeight: 'bold', //坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
      fontstyle: 'normal', //坐标轴文字样式      (可选normal  italic   oblique)
      fontFamily: '华文行楷', //坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
      padding: [5, 0, 2, -5], //坐标轴文字边距        (上右下左)
    },
    nameGap: 25, //坐标轴名称与轴线之间的距离        (用数字表示)
    nameRotate: 0, //坐标轴名字旋转的角度值
    inverse: false, //是否为反向坐标轴

    //坐标轴轴线设置
    // ======================================================================
    axisLine: {
      show: true, //是否显示坐标轴轴线
      symbol: ['none', 'arrow'], //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
      symbolSize: [8, 8], //箭头大小        ([宽度,高度])
      symbolOffset: [0, 7], //箭头偏移
      lineStyle: {
        //坐标轴的线
        color: 'green', //线的颜色
        width: 3, //线的粗细程度    (用数字表示)
        type: 'solid', //线的类型        (可选solid  dotted  dashed)
        opacity: 1, //线的透明度        (用0~1的小数表示)
      },
    },

    //坐标轴刻度设置
    // ======================================================================
    axisTick: {
      show: true, //是否显示坐标轴刻度
      inside: true, //坐标轴刻度指向        (true表示向上   false表示向下)
      alignWithLabel: true, //刻度线是否和标签对齐
      length: 5, //坐标轴刻度长度
      lineStyle: {
        //坐标轴刻度的样式
        color: 'black', //坐标轴刻度的颜色
        width: 2, //坐标轴刻度的粗细程度    (用数字表示)
        type: 'solid', //坐标轴刻度的类型        (可选solid  dotted  dashed)
      },
    },

    //坐标轴刻度文字的设置
    // ======================================================================
    axisLabel: {
      show: true, //是否显示
      inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
      rotate: 30, //坐标轴刻度文字的旋转角度
      margin: 10, //坐标轴刻度文字与轴线之间的距离
      color: 'red', //坐标轴刻度文字的颜色
      fontSize: 17, //坐标轴刻度文字的大小         (用数字表示)
      fontWeight: 'lighter', //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
      fontstyle: 'normal', //坐标轴刻度文字的样式          (可选normal  italic   oblique)
      fontFamily: '华文行楷', //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
      padding: [5, 0, 2, -5], //坐标轴刻度文字的边距        (上右下左)
    },

    //网格线
    // ======================================================================
    splitLine: {
      show: true, //是否显示
      lineStyle: {
        //网格线样式
        color: '#0735a2', //网格线颜色
        width: 1, //网格线的加粗程度
        type: 'dashed', //网格线类型
      },
    },

    //网格区域
    // ======================================================================
    splitArea: {
      show: true, //是否显示
    },

    //坐标轴刻度文字数据
    // ======================================================================
    data: [],
  },

  // y轴
  // ---------------------------------------------------------------------------------------------
  yAxis: {
    show: true, //是否显示 y 轴
    position: 'bottom', //y轴的位置        (可选位置top  bottom)
    offset: 0, //y轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
    type: 'category', //坐标轴类型        (可选value   category   time   log)
    name: '单位/个', //坐标轴名称
    nameLocation: 'end', //坐标轴名称显示位置      (可选start   center   end)

    //坐标轴名称的文字样式
    // ======================================================================
    nameTextStyle: {
      color: 'black', //坐标轴名称的颜色
      fontSize: 30, //坐标轴名称的大小         (用数字表示)
      fontWeight: 'bold', //坐标轴文字加粗程度        (可选bold   bolder  lighter  normal)
      fontstyle: 'normal', //坐标轴文字样式      (可选normal  italic   oblique)
      fontFamily: '华文行楷', //坐标轴文字风格        (可选楷体  宋体  华文行楷等等)
      padding: [5, 0, 2, -5], //坐标轴文字边距        (上右下左)
    },
    nameGap: 25, //坐标轴名称与轴线之间的距离        (用数字表示)
    nameRotate: 0, //坐标轴名字旋转的角度值
    inverse: false, //是否为反向坐标轴

    //坐标轴轴线设置
    // ======================================================================
    axisLine: {
      show: true, //是否显示坐标轴轴线
      symbol: ['none', 'arrow'], //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
      symbolSize: [8, 8], //箭头大小        ([宽度,高度])
      symbolOffset: [0, 7], //箭头偏移
      lineStyle: {
        //坐标轴的线
        color: 'green', //线的颜色
        width: 3, //线的粗细程度    (用数字表示)
        type: 'solid', //线的类型        (可选solid  dotted  dashed)
        opacity: 1, //线的透明度        (用0~1的小数表示)
      },
    },

    //坐标轴刻度设置
    // ======================================================================
    axisTick: {
      show: true, //是否显示坐标轴刻度
      inside: true, //坐标轴刻度指向        (true表示向上   false表示向下)
      alignWithLabel: true, //刻度线是否和标签对齐
      length: 5, //坐标轴刻度长度
      lineStyle: {
        //坐标轴刻度的样式
        color: 'black', //坐标轴刻度的颜色
        width: 2, //坐标轴刻度的粗细程度    (用数字表示)
        type: 'solid', //坐标轴刻度的类型        (可选solid  dotted  dashed)
      },
    },

    //坐标轴刻度文字的设置
    // ======================================================================
    axisLabel: {
      show: true, //是否显示
      inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
      rotate: 0, //坐标轴刻度文字的旋转角度
      margin: 10, //坐标轴刻度文字与轴线之间的距离
      color: 'red', //坐标轴刻度文字的颜色
      fontSize: 17, //坐标轴刻度文字的大小         (用数字表示)
      fontWeight: 'lighter', //坐标轴刻度文字的加粗程度    (可选bold   bolder  lighter  normal)
      fontstyle: 'normal', //坐标轴刻度文字的样式          (可选normal  italic   oblique)
      fontFamily: '宋体', //坐标轴刻度文字的风格        (可选楷体  宋体  华文行楷等等)
      padding: [5, 0, 2, -5], //坐标轴刻度文字的边距        (上右下左)
    },

    //网格线
    // ======================================================================
    splitLine: {
      show: true, //是否显示
      //网格线样式
      lineStyle: {
        color: '#0735a2', //网格线颜色
        width: 1, //网格线的加粗程度
        type: 'dashed', //网格线类型
      },
    },

    //网格区域
    // ======================================================================
    splitArea: {
      show: true, //是否显示
    },

    //坐标轴刻度文字数据(不填则在柱状或折线图中为自适应数字)
    // ======================================================================
    data: [],
  },

  // 提示框(即鼠标放入某点位的数据展示小框)
  // ---------------------------------------------------------------------------------------------
  tooltip: {
    trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
    showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
    hideDelay: 100, // 隐藏延迟，单位ms
    transitionDuration: 0.4, // 动画变换时间，单位s
    backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
    borderColor: '#333', // 提示边框颜色
    borderRadius: 4, // 提示边框圆角，单位px，默认为4
    borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
    padding: 5, // 提示内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css

    // 坐标轴指示器，坐标轴触发有效
    // ======================================================================
    axisPointer: {
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        // 直线指示器样式设置
        color: '#48b',
        width: 2,
        type: 'solid',
      },

      // 阴影指示器样式设置
      // ======================================================================
      shadowStyle: {
        width: 'auto', // 阴影大小
        color: 'rgba(150,150,150,0.3)', // 阴影颜色
      },
    },
    textStyle: {
      color: '#fff',
    },
  },

  // 图例（通常在饼状图中使用）：图表旁边的文字
  // ---------------------------------------------------------------------------------------------
  legend: {
    orient: 'horizontal', // 布局方式，默认为水平布局，可选为： // 'horizontal' ¦ 'vertical'(图例列式排列)
    x: 'center', // 水平安放位置，默认为全图居中，可选为： // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px）
    y: 'top', // 垂直安放位置，默认为全图顶端，可选为： // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位px）
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc', // 图例边框颜色
    borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
    padding: 5, // 图例内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10， // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 图例图形宽度
    itemHeight: 14, // 图例图形高度
    textStyle: {
      color: '#333', // 图例文字颜色
    },
  },

  //饼图中各模块的颜色，成员为颜色的字符串
  // ---------------------------------------------------------------------------------------------
  color: ['#FE3A64'],

  // 值域
  // ---------------------------------------------------------------------------------------------
  dataRange: {
    orient: 'vertical', // 布局方式，默认为垂直布局，可选为：
    // 'horizontal' ¦ 'vertical'
    x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
    // 'center' ¦ 'left' ¦ 'right'
    // ¦ {number}（x坐标，单位px）
    y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
    // 'top' ¦ 'bottom' ¦ 'center'
    // ¦ {number}（y坐标，单位px）
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc', // 值域边框颜色
    borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
    padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
    // 接受数组分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
    // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值  10
    itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值  10
    splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
    color: ['#1e90ff', '#f0ffff'], // 颜色(值域的颜色渐变范围)
    //text:['高','低'],         // 文本，默认为数值文本
    textStyle: {
      color: '#333', // 值域文字颜色
    },
  },

  //工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具
  // ---------------------------------------------------------------------------------------------
  toolbox: {
    orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
    // 'horizontal' ¦ 'vertical'
    x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
    // 'center' ¦ 'left' ¦ 'right'
    // ¦ {number}（x坐标，单位px）
    y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
    // 'top' ¦ 'bottom' ¦ 'center'
    // ¦ {number}（y坐标，单位px）
    color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
    backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
    borderColor: '#ccc', // 工具箱边框颜色
    borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
    padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
    // 接受数组分别设定上右下左边距，同css
    itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
    // 横向布局时为水平间隔，纵向布局时为纵向间隔
    itemSize: 16, // 工具箱图形宽度
    featureImageIcon: {}, // 自定义图片icon

    //工具内容
    // ======================================================================
    feature: {
      mark: {}, //'辅助线开关',
      markUndo: {}, //'删除辅助线',
      markClear: {}, //'清空辅助线',
      dataZoom: {}, //'区域缩放',
      dataZoomReset: {}, //'区域缩放后退',
      dataView: {}, //'数据视图',
      lineChart: {}, //'折线图切换',
      barChart: {}, //'柱形图切换',
      restore: {}, //'还原',
      saveAsImage: '', //'保存为图片'
    },
  },

  // 区域缩放控制器(即图标下方展示内容)
  // ---------------------------------------------------------------------------------------------
  dataZoom: {
    orient: 'horizontal', // 布局方式，默认为水平布局，可选为： // 'horizontal' ¦ 'vertical' // x: {number},               // 水平安放位置，默认为根据grid参数适配，可选为： // {number}（x坐标，单位px） // y: {number},               // 垂直安放位置，默认为根据grid参数适配，可选为： // {number}（y坐标，单位px） // width: {number},           // 指定宽度，横向布局时默认为根据grid参数适配 // height: {number},          // 指定高度，纵向布局时默认为根据grid参数适配
    backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
    dataBackgroundColor: '#eee', // 数据背景颜色
    fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
    handleColor: 'rgba(70,130,180,0.8)', // 手柄颜色
  },

  // series[i]：折线图:line,柱状图 bar
  // ---------------------------------------------------------------------------------------------
  series: {
    type: 'bar', // 折线图:line,柱状图 bar
    barMinHeight: 0, // 最小高度改为0

    //图形上的文本标签，可用于说明图形的一些数据信息，
    // ======================================================================
    label: {
      show: false, //是否显示标签。
      position: 'inside', //标签的位置。
      distance: 5, //距离图形元素的距离
      rotate: '', //标签旋转。从 -90 度到 90 度。正值是逆时针。
      offset: [''], //是否对文字进行偏移。 [10,20]
      formatter: '', //标签内容格式器，支持字符串模板和回调函数两种形式，
      color: '#fff', //文字的颜色。可进行渐变操作
      fontStyle: 'normal', //文字字体的风格 'normal'|'italic'|'oblique'
      fontWeight: normal, //文字字体的粗细
      fontFamily: 'sans-serif', //文字的字体系列
      fontSize: 12, //文字的字体大小
      align: '', //文字水平对齐方式，默认自动。'left'|'center'|'right'
      verticalAlign: '', //文字垂直对齐方式，默认自动。'top'|'middle'|'bottom'
      lineHeight: '', //行高。
      backgroundColor: 'transparent', //文字块背景色。
      borderColor: 'transparent', //文字块边框颜色。
      borderWidth: 0, //文字块边框宽度。
      borderRadius: 0, //文字块的圆角。
      padding: 0, //文字块的内边距 padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的边距。
      shadowColor: 'transparent', //文字块的背景阴影颜色。
      shadowBlur: 0, //文字块的背景阴影长度。
      shadowOffsetX: 0, //文字块的背景阴影 X 偏移。
      shadowOffsetY: 0,
      width: '', //文字块的宽度。一般不用指定，
      height: '',
      textBorderColor: 'transparent', //文字本身的描边颜色。
      textBorderWidth: 0,
      textShadowColor: 'transparent', //文字本身的阴影颜色。
      textShadowBlur: 0, //文字本身的阴影长度。
      textShadowOffsetX: 0, //文字本身的阴影 X 偏移。
      textShadowOffsetY: 0,
    },

    //图形样式。
    // ======================================================================
    itemStyle: {
      color: '', //柱条的颜色。 默认从全局调色盘 option.color 获取颜色
      borderColor: '#000', //柱条的描边颜色。
      borderWidth: 0, //柱条的描边宽度，默认不描边。
      borderType: 'solid', //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
      borderRadius: [10, 10, 0, 0], //圆角半径，
      shadowBlur: '', //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
      shadowColor: '', //阴影颜色。支持的格式同color。
      shadowOffsetX: 0, //阴影水平方向上的偏移距离。
      shadowOffsetY: 0,
      opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。

      //高亮的图形样式和标签样式。
      emphasis: {
        label: {}, //内容同上
        barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
        barBorderRadius: 0, // 柱条边线圆角，单位px，默认为0
        barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
      },

      stack: null,
      cursor: 'pointer',
      barWidth: 自适应, //柱条的宽度，
      barMaxWidth: 自适应, //柱条的最大宽度，
      barMinHeight: 0,
      barGap: '30%', //不同系列的柱间距离，
      barCategoryGap: '20%', //同一系列的柱间距离，
      large: false, //是否开启大数据量优化，
      largeThreshold: 400, //开启绘制优化的阈值。
      progressive: 5000, //渐进式渲染时每一帧绘制图形数量，
      progressiveThreshold: 3000, //启用渐进式渲染的图形数量阈值，
      progressiveChunkMode: mod, //分片的方式。 'sequential'|'mod'
      dimensions: [''],
      encode: {}, //可以定义 data 的哪个维度被编码成什么。
      seriesLayoutBy: 'column', //'column'：默认，dataset 的列对应于系列，从而 dataset 中每一列是一个维度（dimension）。
      //'row'：dataset 的行对应于系列，从而 dataset 中每一行是一个维度（dimension）。
      datasetIndex: 0, //datasetIndex 指定本系列使用那个 dataset。
      legendHoverLink: true, // 是否启用图例 hover 时的联动高亮。
      coordinateSystem: 'cartesian2d', //该系列使用的坐标系  |cartesian2d
      xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。

      //系列中的数据内容数组。在柱状与折线图中，可以省略为 number[] 的格式
      data: [
        {
          name: '', //数据项名称。
          value: '', //单个数据项的数值。
        },
      ],

      //单个柱条文本的样式设置。
      label: {
        show: false, //是否显示标签。
        position: 'inside', //标签的位置。
        //内容同上边的label
      },

      //图表标注。
      markPoint: {
        symbol: 'pin', //标记的图形
        symbolSize: 50, //标记的大小，
        symbolRotate: '', //标记的旋转角度。
        symbolKeepAspect: false,
        symbolOffset: [0, 0], //标记相对于原本位置的偏移。
        silent: false, //图形是否不响应和触发鼠标事件，
        label: {}, //标注的文本，内容如上的label
      },
    },
  },

  // series[i]：饼图 pie
  // ---------------------------------------------------------------------------------------------
  series: {
    type: 'pie',
    legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
    hoverAnimation: true, //是否开启 hover 在扇区上的放大动画效果
    hoverOffset: 10, //高亮扇区的偏移距离。
    selectedMode: false, //选中模式，表示是否支持多个选中，默认关闭， //支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选
    selectedOffset: 10, //选中扇区的偏移距离。
    clockwise: true, //饼图的扇区是否是顺时针排布。
    startAngle: 90, //起始角度，支持范围[0, 360]。
    minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
    minShowLabelAngle: 0, //小于这个角度（0 ~ 360）的扇区，不显示标签
    roseType: false, //是否展示成南丁格尔图，'radius' | 'area'
    avoidLabelOverlap: true, //是否启用防止标签重叠策略，
    stillShowZeroSum: true, //是否在数据和为0（一般情况下所有数据为0） 的时候不显示扇区。
    cursor: 'pointer', //鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
    center: ['50%', '50%'], // 默认全局居中
    radius: [0, '75%'],

    // 此系列的参数可参考 折线图与柱状图，相同内容
    // ======================================================================
    label: {}, //饼图图形上的文本标签，
    labelLine: {}, //标签的视觉引导线样式
    itemStyle: {}, //图形样式。
    emphasis: {}, //高亮的扇区和标签样式
  },
}
